<template>
  <transition name="fade" @beforeEnter="beforeEnter" @afterEnter="afterEnter">
    <div class="container" v-if="show">
      <div class="alert-container">
          <p class="title">
              {{title}}
          </p>
          <p class="content">{{content}}</p>
          <div class="button" @click="show=false">{{button}}</div>
      </div>
    </div>
  </transition>
</template>
<style lang="less" scoped>
  @import url('./theme.less');
  @import url('../../style/mixin.less');
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .1s;
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }

  .container {
    height: 100vh;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: @alert-mask-background-color;
    .alert-container {
      width: 70%;
      background: @alert-background-color;
      float: left;
      transform: translate(-50%, -50%);
      position: absolute;
      top: 50%;
      left: 50%;
      border-radius: @alert-radius;
      .title{
          font-size: 17px;
          height: 24px;
          line-height: 24px;
          padding:20px 0 10px 0;
          text-align: center;
      }
      .content{
          font-size: 15px;
          line-height: 19px;
          padding-bottom: 30px;
          padding-top: 10px;
          text-align: center;
      }
      .button{
          font-size: 18px;
          height: 48px;
          line-height: 48px;
          text-align: center;
          border-top: 1px solid #d5d5d6;
          color: @alert-button-color;
      }
    }
  }

</style>
<script>
  export default {
    data() {
      return {
        show: false
      }
    },
    methods: {
      beforeEnter(el) {
        Velocity(el.querySelector('.alert-container'), {
          scaleX: 1.3,
          scaleY: 1.3,
          opacity: 0,
          translateY: '-50%',
          translateX: '-40%',
        }, {
          duration: 0
        })

      },
      afterEnter(el) {
        Velocity(el.querySelector('.alert-container'), {
          scaleX: 1,
          scaleY: 1,
          opacity: 1,
          translateY: '-50%',
          translateX: '-50%',
        }, {
          duration: 500
        })
      }
    },
    mounted() {
      this.show = true
    },
    props:{
        title:{
            default: '我是标题',
        },
        content:{
            default: '我是内容，看到了没',
        },
        button:{
            default: '确定'
        }
    }
  }
</script>
